
<div class="layui-upload">
    <div class="layui-upload-list">
        <div class="layui-input-block" id="voice{{$name}}" style="margin-left: 0px">
            @if($value)
                <audio controls="controls" src="{{route('admin.file',['filename'=>$value])}}">您的浏览器支持该播放器</audio>
            @endif
        </div>
        <input type="hidden" name="{{$name}}" id="{{$name}}" value="{{$value}}" {{isset($required)&&$required?'lay-verify="required"':''}} id="saved"/><!--需要有一个名为savedpath的id，用以标识文件保存路径的表单字段，还需要一个任意名称的name-->

        <p id="{{$name}}Text"></p>
        <p style="color:red">{{isset($msg)?$msg:''}}</p>
    </div>
    <button type="button" class="layui-btn" id="{{$name}}button">上传音频</button>
</div>
<script>

    layui.use(['upload','layer'],function(){
        var $=layui.jquery,upload=layui.upload;
        var layer = layui.layer;
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        @isset($value)
            $("#{{$name}}").val('{{$value}}');

        @endisset
        //普通图片上传
        var _load;
        var uploadInst = upload.render({
            elem: '#{{$name}}button',
            url: '/admin/voice/upload',
            method:'post',
            accept:'audio',
            exts:'mp3',
            before: function(obj){
                _load = layer.msg('正在上传音频，请稍候',{icon: 16,time:false,shade:0.8});
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    var str = '<audio src="'+result+'" controls="controls">您的浏览器不支持该播放器</audio>';
                    $('#voice{{$name}}').html(str);
                });
            }
            ,done: function(res){
                layer.close(_load)
                if(res.code==undefined){
                    return layer.msg('{{trans('message.system_busy')}}');
                }
                //如果上传失败
                if(res.code > 0){
                    return layer.msg(res.msg);
                }
                //上传成功
                $("#{{$name}}").val(res.data.src);
                return layer.msg(res.msg);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#{{$name}}Text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });

</script>